<template>
  <div class="app-container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="col_bg">
            <div class="col-tit">今日任务数</div>
            <div class="col-num">{{ taskData.toDayPlanStartCnt || 0 }}</div>
            <div :class="['col-wave',yesDayPlanStartCntper.wave? 'col-wave-up':'col-wave-down']">{{ yesDayPlanStartCntper.per || 0 }}</div>
            <div class="head-icon jrrws" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col_bg">
            <div class="col-tit">今日完工数</div>
            <div class="col-num">{{ taskData.toDayEndCnt || 0 }}</div>
            <div :class="['col-wave',yesDayPlanStartCntper.wave? 'col-wave-up':'col-wave-down']">{{ yesDayEndCntper.per|| 0 }}</div>
            <div class="head-icon jrwgs" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col_bg">
            <div class="col-tit">今日开工数</div>
            <div class="col-num">{{ taskData.toDayStartCnt || 0 }}</div>
            <div :class="['col-wave',yesDayPlanStartCntper.wave? 'col-wave-up':'col-wave-down']">{{ yesDayStartCntper.per || 0 }}</div>
            <div class="head-icon jrkgs" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col_bg">
            <div class="col-tit">今日派单数</div>
            <div class="col-num">{{ taskData.toDayReleaseCnt || 0 }}</div>
            <div :class="['col-wave',yesDayPlanStartCntper.wave? 'col-wave-up':'col-wave-down']">{{ yesDayReleaseCntper.per|| 0 }}</div>
            <div class="head-icon jrpds" />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 待办事项 -->
    <div class="db_chart">
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="col_bg">
            <leaflet-map style="height:420px" :maplist="maplist" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col_bg">
            <div class="col-headr-title">
              <span>待办任务（{{ total }}）</span>
              <el-link type="primary" class="db-more">
                更多
                <i class="el-icon-d-arrow-right" />
              </el-link>
            </div>
            <div class="infinite-list-wrapper" style="overflow:auto">
              <ul v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="db-ul">
                <li v-for="(item, i) in dblist" :key="i" class="db-list">
                  任务“模板名称任务类型”全部接单完毕，
                  <el-link type="success">请设置组长</el-link>;
                </li>
                <p v-if="loading" style="text-align:center">加载中...</p>
                <p v-if="noMore" style="text-align:center">没有更多了</p>
              </ul>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 接单实况 -->
    <div class="jd_list">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="col_bg jd-view">
            <div class="col-headr-title">
              <span>接单实况（100）</span>
            </div>
            <div class="jd-view-sk">
              <div class="jd-view-sk-dashboard">
                <div>
                  <p>已接{{ viewOrder.haveOrderCount }}单</p>
                </div>
                <div>
                  <p>剩余{{ viewOrder.notHaveOrder }}单</p>
                </div>
              </div>
              <div class="jd-view-sk-tabel">
                <el-table :data="viewOrder.orderReceivingList" stripe style="width: 100%" height="240px">
                  <el-table-column prop="elecName" label="姓名" width="180" />
                  <el-table-column prop="taskType" label="任务类型" width="180" />
                  <el-table-column prop="modelName" label="模版名称" />
                  <el-table-column prop="taskMode" label="派单类型" />
                  <el-table-column label="时间">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.joinTime | formatTime('{y}-{m}-{d} {h}-{i}') }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import leafletMap from '@/components/leaflet'
import {
  listOrgTaskByPage,
  listOrgTodoTaskByPage,
  listTask,
  viewOrderReceiving,
  getTaskNumCnt
} from '@/api/product-ts/task'
export default {
  components: {
    leafletMap
  },
  data() {
    return {
      count: 1,
      maplist: [],
      loading: false,
      total: 0,
      viewOrder: {},
      dblist: [],
      Tasktable: [],
      taskData: {},
      TaskNumCnt: {}
    }
  },
  computed: {
    noMore() {
      return this.count >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    },
    yesDayPlanStartCntper() {
      // 今日任务数
      let per = this.taskData.yesDayPlanStartCnt ? 0 : (this.taskData.toDayPlanStartCnt - this.taskData.yesDayPlanStartCnt) / this.taskData.yesDayPlanStartCnt
      per = per.toFixed(2)
      return {
        per: per,
        wave: per < 0
      }
    },
    yesDayEndCntper() {
      // 昨日完工数
      let per = this.taskData.yesDayEndCnt ? 0 : (this.taskData.toDayEndCnt - this.taskData.yesDayEndCnt) / this.taskData.yesDayEndCnt
      per = per.toFixed(2)
      return {
        per: per,
        wave: per < 0
      }
    },
    yesDayReleaseCntper() {
      // 昨日派单数
      let per = this.taskData.yesDayReleaseCnt ? 0 : (this.taskData.toDayReleaseCnt - this.taskData.yesDayReleaseCnt) / this.taskData.yesDayReleaseCnt
      per = per.toFixed(2)
      return {
        per: per,
        wave: per < 0
      }
    },
    yesDayStartCntper() {
      // 昨日开工数
      let per = this.taskData.yesDayStartCnt ? 0 : (this.taskData.toDayStartCnt - this.taskData.yesDayStartCnt) / this.taskData.yesDayStartCnt
      per = per.toFixed(2)
      return {
        per: per,
        wave: per < 0
      }
    }
  },
  mounted() {
    // 统计当日头部
    getTaskNumCnt({}).then(res => {
      this.TaskNumCnt = res.data
    })
    listOrgTaskByPage({ pageSize: 99999, pageIndex: 1 }).then(res => {
      this.maplist = res.data.list
    })
    // 工单管理首页任务列表
    listTask({ pageSize: 99999, pageIndex: 1 }).then(res => {
      this.Tasktable = res.data.list
      this.taskData = res.data
    })
    // 接单实况
    viewOrderReceiving({}).then(res => {
      this.viewOrder = res.data
    })
  },
  methods: {
    load() {
      console.log(1)
      this.count += 1
      this.loading = true
      listOrgTodoTaskByPage({
        pageIndex: this.count,
        pageSize: 10
      }).then(res => {
        this.dblist = [...this.dblist, ...res.data.list]
        this.total = res.data.total || 0

        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./style";
</style>

